<template>
  <Demo01Container>
    <div class="flex flex-col">
      <div class="flex flex-row justify-around">
        <box-01
          class="flex-1 mx-1"
          v-for="(box01, idx) in box01Arr"
          v-bind="box01"
          :key="idx"
        ></box-01>
      </div>
      <div class="h-[280px] my-[12px] flex flex-row">
        <Box02 class="flex-1 mx-3" title="测试测试1"></Box02>
        <Box02 class="flex-1 mx-3" title="测试测试2"></Box02>
        <Box02 class="flex-1 mx-3" title="测试测试3"></Box02>
      </div>
      <div class="h-[375px] bg-green-100">
        <demo-table
          :columns="columns"
          :data="rowData"
          :row-height="27"
          :headerCellStyle="{ padding: '6px' }"
        ></demo-table>
      </div>
    </div>
  </Demo01Container>
</template>

<script setup lang="ts">
import type { ComponentProps } from 'vue-component-type-helpers'
import Box01 from '@/components/demo-01/Box01.vue'
import { ScaleView } from '@/components/scale-view'
import { barEchartsOptionBuilder } from '@/echarts-option-builder/BarEchartsOptionBuilder'
import { notification } from 'ant-design-vue'
import { reactive } from 'vue'
import type { VxeGridProps } from 'vxe-table'
import type { ColumnInfo } from '@/components/demo-01/typing'

const scaleView = new ScaleView({ scaleMode: 'maxScale', el: '#app', bodyOverflowHidden: false })

type Box01Type = ComponentProps<typeof Box01>

const box01Arr: Box01Type[] = [
  {
    title: '制造工费占产值比',
    mainValInfo: {
      value: 13.86,
      unit: '%',
      valueColor: '#EB301B'
    },
    subValInfoArr: [{ prefix: '目标', value: '14', unit: '%' }],
    detailArr: [
      { title: '年度目标', value: '13.88', unit: '%', valueColor: '#F0F9FF' },
      { title: '累计实际', value: '13.88', unit: '%', valueColor: '#F0F9FF' },
      { title: '年度预测', value: '13.88', unit: '%', valueColor: '#F0F9FF' },
      { title: '进度', value: '13.88', unit: '%', valueColor: '#F0F9FF' },
      { title: '与上期同比', value: '13.88', unit: '%', valueColor: '#00E994' }
    ]
  },
  {
    title: '制造模拟利润',
    mainValInfo: {
      value: 15.89,
      unit: '%',
      valueColor: '#00E994'
    },
    detailArr: [
      { title: '年度目标', value: '13.88', unit: '%', valueColor: '#F0F9FF' },
      { title: '累计实际', value: '13.88', unit: '%', valueColor: '#F0F9FF' },
      { title: '年度预测', value: '13.88', unit: '%', valueColor: '#F0F9FF' },
      { title: '进度', value: '13.88', unit: '%', valueColor: '#F0F9FF' },
      { title: '与上期同比', value: '13.88', unit: '%', valueColor: '#00E994' }
    ]
  },
  {
    title: '制造模拟利润',
    mainValInfo: {
      value: 2887,
      unit: '亿',
      valueColor: '#EB301B'
    },
    subValInfoArr: [{ prefix: '目标', value: '2887', unit: '亿' }],
    detailArr: [
      { title: '年度目标', value: '13.88', unit: '%', valueColor: '#F0F9FF' },
      { title: '累计实际', value: '13.88', unit: '%', valueColor: '#F0F9FF' },
      { title: '年度预测', value: '13.88', unit: '%', valueColor: '#F0F9FF' },
      { title: '进度', value: '13.88', unit: '%', valueColor: '#F0F9FF' },
      { title: '与上期同比', value: '13.88', unit: '%', valueColor: '#00E994' }
    ]
  },
  // {
  //   title: '制造模拟利润',
  //   mainValInfo: {
  //     value: 2887,
  //     unit: '亿',
  //     valueColor: '#EB301B'
  //   },
  //   subValInfoArr: [{ prefix: '目标', value: '2887', unit: '亿' }],
  //   detailArr: [
  //     { title: '年度目标', value: '13.88', unit: '%', valueColor: '#F0F9FF' },
  //     { title: '累计实际', value: '13.88', unit: '%', valueColor: '#F0F9FF' },
  //     { title: '年度预测', value: '13.88', unit: '%', valueColor: '#F0F9FF' },
  //     { title: '进度', value: '13.88', unit: '%', valueColor: '#F0F9FF' },
  //     { title: '与上期同比', value: '13.88', unit: '%', valueColor: '#00E994' }
  //   ]
  // },
  {
    title: '制造模拟利润',
    mainValInfo: {
      value: 2887,
      unit: '亿',
      valueColor: '#EB301B'
    },
    subValInfoArr: [{ prefix: '目标', value: '2887', unit: '亿' }],
    detailArr: [
      { title: '年度目标', value: '13.88', unit: '%', valueColor: '#F0F9FF' }
      // { title: '累计实际', value: '13.88', unit: '%', valueColor: '#F0F9FF' },
      // { title: '年度预测', value: '13.88', unit: '%', valueColor: '#F0F9FF' },
      // { title: '进度', value: '13.88', unit: '%', valueColor: '#F0F9FF' },
      // { title: '与上期同比', value: '13.88', unit: '%', valueColor: '#00E994' }
    ]
  },
  {
    title: '制造模拟利润',
    mainValInfo: {
      value: 2887,
      unit: '亿',
      valueColor: '#EB301B'
    },
    subValInfoArr: [
      { value: '2887', unit: '亿' },
      { value: '2887', unit: '亿' }
    ],
    detailArr: [
      { title: '年度目标', value: '13.88', unit: '%', valueColor: '#F0F9FF' },
      { title: '累计实际', value: '13.88', unit: '%', valueColor: '#F0F9FF' },
      { title: '年度预测', value: '13.88', unit: '%', valueColor: '#F0F9FF' },
      { title: '进度', value: '13.88', unit: '%', valueColor: '#F0F9FF' },
      { title: '与上期同比', value: '13.88', unit: '%', valueColor: '#00E994' }
    ]
  }
]
interface RowVO {
  id: number
  name: string
  nickname: string
  role: string
  sex: string
  age: number
  address: string
}
const columns: ColumnInfo[] = [
  {
    title: '姓名',
    field: 'name',
    align: 'left',
    headerTextColor: '#0DFCFE',
    contentTextColor: '#0DFCFE',
    width: 102
  },
  {
    title: '性别',
    field: 'sex',
    align: 'center',
    headerTextColor: '#0DFCFE',
    contentTextColor: '#FFFFFF',
    width: 102
  }
]
const rowData: RowVO[] = [
  {
    id: 10001,
    name: 'Test1',
    nickname: 'T1',
    role: 'Develop',
    sex: 'Man',
    age: 28,
    address: 'Shenzhen'
  },
  {
    id: 10002,
    name: 'Test2',
    nickname: 'T2',
    role: 'Test',
    sex: 'Women',
    age: 22,
    address: 'Guangzhou'
  },
  {
    id: 10003,
    name: 'Test3',
    nickname: 'T3',
    role: 'PM',
    sex: 'Man',
    age: 32,
    address: 'Shanghai'
  },
  {
    id: 10004,
    name: 'Test4',
    nickname: 'T4',
    role: 'Designer',
    sex: 'Women',
    age: 23,
    address: 'Shenzhen'
  },
  {
    id: 10005,
    name: 'Test5',
    nickname: 'T5',
    role: 'Develop',
    sex: 'Women',
    age: 30,
    address: 'Shanghai'
  },
  {
    id: 10006,
    name: 'Test6',
    nickname: 'T6',
    role: 'Designer',
    sex: 'Women',
    age: 21,
    address: 'Shenzhen'
  },
  {
    id: 10007,
    name: 'Test7',
    nickname: 'T7',
    role: 'Test',
    sex: 'Man',
    age: 29,
    address: 'Shenzhen'
  },
  {
    id: 10008,
    name: 'Test8',
    nickname: 'T8',
    role: 'Develop',
    sex: 'Man',
    age: 35,
    address: 'Shenzhen'
  },
  {
    id: 10009,
    name: 'Test9',
    nickname: 'T9',
    role: 'Develop',
    sex: 'Woman',
    age: 35,
    address: 'Shenzhen'
  },
  {
    id: 10010,
    name: 'Test10',
    nickname: 'T10',
    role: 'Develop',
    sex: 'Woman',
    age: 35,
    address: 'Shenzhen'
  }
]
function onClick() {
  notification.open({
    message: 'This is a success message',
    type: 'success'
  })
}
const gridOptions = reactive<VxeGridProps<RowVO>>({
  border: false,
  height: 'auto',
  align: null,
  columnConfig: {
    resizable: true
  },
  columns: [
    { type: 'seq', width: 50 },
    { field: 'name', title: 'name' },
    { field: 'sex', title: 'sex' },
    { field: 'address', title: 'Address' }
  ],
  data: []
})
</script>

<style scoped lang="less">
.myTable {
  :deep(.vxe-table--header-wrapper) {
    border-bottom: 2px solid red;
  }
  :deep(.vxe-table--body .vxe-body--column) {
    background-image: none;
  }
  :deep(.vxe-table--body tr td.vxe-body--column:nth-child(1)) {
    border-bottom: 2px solid red;
  }
  :deep(.vxe-table--body tr td.vxe-body--column:nth-child(2)) {
    border-bottom: 2px solid red;
    border-right: 2px solid red;
  }
}
</style>
